<template>
  <div class="static">
    <div class="topNav">
      <div class="addressImg">
        <img src="../../../assets/home/地址管理.png" alt="" />
      </div>

      <p>北京理工大学国防科技园二号楼10层</p>
      <van-badge :content="5">
      <div class="message">
        <img src="../../../assets/home/消息.png" alt="" />
      </div>
      </van-badge>
    </div>
    <router-link to="/search">
      <van-search
        v-model="value"
        class="search"
        shape="round"
        placeholder="请输入搜索关键词"
        readonly
      />
    </router-link>
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item
          ><div><img src="../../../assets/home/swiper(4).jpg" alt="" /></div
        ></van-swipe-item>
        <van-swipe-item
          ><div><img src="../../../assets/home/swiper(5).jpg" alt="" /></div
        ></van-swipe-item>
        <van-swipe-item
          ><div><img src="../../../assets/home/swiper(6).jpg" alt="" /></div
        ></van-swipe-item>
        <van-swipe-item
          ><div><img src="../../../assets/home/swiper(7).jpg" alt="" /></div
        ></van-swipe-item>
        <!-- <template #indicator="{ active, total }">
          <div class="box">
            <div
              v-for="(item, index) in total"
              :class="active == index ? 'longRound' : 'round'"
            ></div>
          </div>
        </template> -->
      </van-swipe>
    </div>
    <div class="sort">
      <ul>
        <li
          v-for="(item, index) in sortList"
          :key="index"
          @click="jumpToclassify(index)"
        >
          <div class="logo"><img :src="item.url" alt="" /></div>
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive ,nextTick,onMounted,onBeforeUnmount,onUnmounted} from "vue";
import { get, otherget, getData, post, put } from "../../../utils/request.js";
import { useRoute, useRouter } from "vue-router";
import {useStore } from "vuex";

const store = useStore();
const route = useRoute();
const router = useRouter();
const value = ref("");
const sortList = ref([
  { url: require("../../../assets/home/logo/智能手表.png"), name: "智能手表" },
  { url: require("../../../assets/home/logo/平板.png"), name: "平板" },
  { url: require("../../../assets/home/logo/耳机.png"), name: "耳机" },
  { url: require("../../../assets/home/logo/音箱.png"), name: "音响" },
  {
    url: require("../../../assets/home/logo/空气净化.png"),
    name: "空气净化器",
  },
  { url: require("../../../assets/home/logo/按摩棒.png"), name: "按摩" },
  { url: require("../../../assets/home/logo/配件.png"), name: "配件" },
  { url: require("../../../assets/home/logo/摄像头.png"), name: "摄像头" },
  { url: require("../../../assets/home/logo/投影仪.png"), name: "投影仪" },
  { url: require("../../../assets/home/logo/手机.png"), name: "手机" },
]);

const getClassify = async () => {
  let result;
  const data = {
    project_id: 234,
  };
  try {
    result = await getData("/classify/classifyGoods", data);
  } catch (error) {
    console.log(error);
  }
  if (result.status == 200) {
    store.commit("classify/setClassify", result.data.result);
    console.log(result.data.result);
  }
};
const jumpToclassify = (index) => {
  router.push(`/classify/${index}`);
};
getClassify();
const handle = () => {
    let scrollTop = document.documentElement.scrollTop;
    
    // console.log(scrollTop);//滚动条的距离  =内容被卷的高度
    //   console.log(clientHeight);// 元素在浏览器的高度
    // console.log(scrollHeight);// box的高度
let searchBox=document.querySelector('.search')
    if ( scrollTop >100) {
       
       searchBox.classList.add('scrollSearch')
    }else{
      searchBox.classList.remove('scrollSearch')
    }
  };
// nextTick(()=>{
//        console.log(33333)
       window.addEventListener("scroll",throttle)
// })
onUnmounted(()=>{
  console.log('ddd')
   window.removeEventListener("scroll",throttle)
})
let previous = 0
 function throttle() {
       let wait=800
    //记录时间
        let now = +new Date()
        if (now - previous > wait) {
          console.log(wait);
           handle()
            previous=now
        }

    }



</script>

<style lang="scss" scoped>
.static {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f1f1f1;
  .topNav {
    height: 11.7vw;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-between;
    // justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    padding:0  3vw;
    img {
      width: 100%;
      height: 100%;
    }
    .addressImg {
      width: 6vw;
      height: 6vw;
    }
    p {
      font-size: 4vw;
      width: 80vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; // 省略号
      transform: translateY();
    }

    .message {
      width: 7vw;
      height: 7vw;
    }
  }
  .search {
    width: 100vw;
  }
  .scrollSearch{
    position: fixed;
    top: 0;
    left: 0;
    widows: 100%;
    z-index: 999;
  }
  .swiper {
    margin-top: 5px;
    width: 100%;

    .my-swipe .van-swipe-item {
      font-size: 5vw;
      line-height: 23vw;
      width: 100%;
      height: 19.5vh;
      text-align: center;

      div {
        width: 100%;
        height: 100%;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }

    .box {
      width: 100%;
      display: flex;
    }
    .longRound {
      width: 50%;
      height: 5px;
      background-color: white;
      border-radius: 1px;
    }
    .round {
      width: 5px;
      height: 5px;
      background-color: #333333;
      border-radius: 50%;
    }
  }
  .sort {
    margin-top: 5px;
    width: 100%;
    height: 34.6vw;

    background-color: white;
    ul {
      width: 98%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
      margin: 0 auto;
      li {
        width: 17vw;
        height: 16vw;

        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 3.2vw;
        color: #333333;
        justify-content: space-around;
        .logo {
          width: 8vw;
          height: 8vw;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
